带你开发一个提示颜色代码的VS Code插件-世界速读

npm i -g yo generator-code

yo code

import * as vscode from "vscode";  // activate方法会在插件被激活时调用 export function activate(context: vscode.ExtensionContext) {          // 注册命令，第一个参数是命令名称，第二参数是回调     let disposable = vscode.commands.registerCommand("chinese-colors.helloWorld", () => {         // 弹出消息提示         vscode.window.showInformationMessage("Hello World from Chinese Colors!");     });      // 添加到插件上下文     context.subscriptions.push(disposable); }  // deactivate方法会在插件失活时调用 export function deactivate() {}

{     "activationEvents": [         "onCommand:chinese-colors.helloWorld"     ],     "contributes": {         "commands": [             {                 "command": "chinese-colors.helloWorld",                 "title": "Hello World"             }         ]     }, }

{     // ...     "contributes": {         "configuration": [{             "title": "color mode",// 配置项名称             "properties": {                 // 配置属性                 "RGB": {                     "type": "boolean",  // 属性值类型                     "default": false,   // 属性默认值                     "description": "控制预设的中国色采用RGB格式"    // 属性描述                 }             }         }]     }, }

import { workspace } from "vscode"; const configuration = workspace.getConfiguration(); const isRGB = configuration.RGB;

import * as vscode from "vscode";  export function activate(context: vscode.ExtensionContext) {      // 注册供应者：languages.registerCompletionItemProvider     const provider2 = vscode.languages.registerCompletionItemProvider(         "plaintext",// plaintext，表示对txt文档激活该插件         {             // 实现provideCompletionItems方法             // document的内容见下文，position为当前光标的位置             provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) {                  // 获取当前这行代码                 const linePrefix = document.lineAt(position).text.substr(0, position.character);                 // 如果这行代码不是以console.结尾，返回undefined，表示不会弹出代码提示                 if (!linePrefix.endsWith("console.")) {                     return undefined;                 }                  // 返回CompletionItem对象组成的数组，补全代码列表：log、warn、error                 // CompletionItem对象可以自己创建，也可以像下面这样new vscode.CompletionItem的方式创建                 // vscode.CompletionItem()有两个参数：                  // 第一个是补全的代码，第二个是代码类型，用于控制显示在每一行提示前的图标                 // vscode.CompletionItemKind.Method表示该代码是一个方法                 return [                     new vscode.CompletionItem("log", vscode.CompletionItemKind.Method),                     new vscode.CompletionItem("warn", vscode.CompletionItemKind.Method),                     new vscode.CompletionItem("error", vscode.CompletionItemKind.Method),                 ];             }         },         "." // 以.作为触发     );      context.subscriptions.push(provider2); }

import * as vscode from "vscode"; import { CompletionItemKind } from "vscode";  export function activate(context: vscode.ExtensionContext) {   const cc = vscode.languages.registerCompletionItemProvider(     "css",     {       provideCompletionItems() {                 return [             {                 detail: "#66ccff",                 documentation: "天依蓝",                 kind: CompletionItemKind.Color,                 filterText: `#66ccff天依蓝`,                 label: "天依蓝",                 insertText: "#66ccff"             },             {                 detail: "#39c5bb",                 documentation: "初音绿",                 kind: CompletionItemKind.Color,                 filterText: `#39c5bb初音绿`,                 label: "初音绿",                 insertText: "#39c5bb"             }         ];       },     },     "#"   );   context.subscriptions.push(cc); }  export function deactivate() {}

"activationEvents": [    "onLanguage:css"  ]

{     "activationEvents": [         "onLanguage:css",         "onLanguage:scss",         "onLanguage:sass",         "onLanguage:less",         "onLanguage:stylus",         "onLanguage:html",         "onLanguage:xml",         "onLanguage:json",         "onLanguage:javascript",         "onLanguage:typescript",         "onLanguage:javascriptreact",         "onLanguage:typescriptreact",         "onLanguage:vue",         "onLanguage:vue-html"     ],     "contributes": {         "configuration": [{             "title": "Chinese Colors",             "properties": {                 "RGB": {                     "type": "boolean",                     "default": false,                     "description": "控制预设的中国色采用RGB格式"                 }             }         }]     }, }

// 声明Color类型 export type Color = {   rgb: number[];   hex: string;   name: string;   phonics: string; };  // 这里只列两个颜色 export const colors: Color[] = [   {     rgb: [92, 34, 35],     hex: "#5c2223",     name: "暗玉紫",     phonics: "anyuzi",   },   {     rgb: [238, 162, 164],     hex: "#eea2a4",     name: "牡丹粉红",     phonics: "mudanfenhong",   },   // ... ]

import * as vscode from "vscode"; import { workspace, CompletionItemKind } from "vscode"; import { colors, Color } from "./colors";  const isRgb = workspace.getConfiguration().RGB;  export function activate(context: vscode.ExtensionContext) {   const cc = vscode.languages.registerCompletionItemProvider(     [       "css",       "scss",       "sass",       "less",       "stylus",       "html",       "xml",       "json",       "javascript",       "typescript",       "javascriptreact",       "typescriptreact",       "vue",       "vue-html",     ],// activationEvents     {       provideCompletionItems() {         const list = [] as CompletionItemKind[];          colors.forEach((color: Color) => {           list.push({             detail: isRgb ? rgb : hex,             documentation: color.name,             kind: CompletionItemKind.Color,             filterText: "#" + color.name + color.phonics,             label: color.name,             insertText: isRgb ? rgb : hex,           });         });         return list;       },     },     "#"   );   context.subscriptions.push(cc); }  export function deactivate() {}

import * as vscode from "vscode";// 插件激活时调用export function activate(context: vscode.ExtensionContext) {console.log("decorator sample is activated");let timeout: NodeJS.Timer | undefined = undefined;    // 为small numbers创建装饰效果类型const smallNumberDecorationType = vscode.window.createTextEditorDecorationType({        // 以下是装饰效果的样式borderWidth: "1px",borderStyle: "solid",overviewRulerColor: "blue",overviewRulerLane: vscode.OverviewRulerLane.Right,light: {// 亮色主题下的边框颜色borderColor: "darkblue"},dark: {// 暗色主题下的边框颜色borderColor: "lightblue"}});// 为large numbers创建装饰效果类型const largeNumberDecorationType = vscode.window.createTextEditorDecorationType({cursor: "crosshair",// 设置装饰的背景颜色, 在package.json中可以配置该名称对应的颜色backgroundColor: { id: "myextension.largeNumberBackground" }});    // activeEditor是当前活跃（展示）的文档编辑器实例let activeEditor = vscode.window.activeTextEditor;    // updateDecorations方法，在每次文档被更新或切换文档时调用。function updateDecorations() {if (!activeEditor) {return;}        // 匹配数字的正则const regEx = /\d+/g;        // 获取文档的文本const text = activeEditor.document.getText();        // 装饰效果数组，用于归集每一个Decoration对象const smallNumbers: vscode.DecorationOptions[] = [];const largeNumbers: vscode.DecorationOptions[] = [];let match;while ((match = regEx.exec(text))) {            // 获取匹配结果的起始位置const startPos = activeEditor.document.positionAt(match.index);// 开始位置const endPos = activeEditor.document.positionAt(match.index + match[0].length);// 结束位置            // Decoration对象const decoration = {                // 装饰效果的位置                range: new vscode.Range(startPos, endPos),                 // 鼠标悬停（hover）的提示信息                hoverMessage: "Number **" + match[0] + "**"             };            // 将符合的结果归集if (match[0].length < 3) {smallNumbers.push(decoration);} else {largeNumbers.push(decoration);}}        // 添加装饰效果activeEditor.setDecorations(smallNumberDecorationType, smallNumbers);activeEditor.setDecorations(largeNumberDecorationType, largeNumbers);}    // 给方法节流function triggerUpdateDecorations(throttle = false) {if (timeout) {clearTimeout(timeout);timeout = undefined;}if (throttle) {timeout = setTimeout(updateDecorations, 500);} else {updateDecorations();}}    // 打开文档时调用一次if (activeEditor) {triggerUpdateDecorations();}    // 切换文档时调用vscode.window.onDidChangeActiveTextEditor(editor => {        // 这一步赋值是必须的，确保activeEditor是当前打开的文档编辑器实例activeEditor = editor;if (editor) {triggerUpdateDecorations();}}, null, context.subscriptions);    // 文档内容发送改变时调用vscode.workspace.onDidChangeTextDocument(event => {if (activeEditor && event.document === activeEditor.document) {triggerUpdateDecorations(true);}}, null, context.subscriptions);}

const decorationType =  window.createTextEditorDecorationType({    // 在匹配位置之前添加装饰效果：    before: {        color: "#eee",        backgroundColor: "#fff",        width: "fit-content"    }})

const decorationType =  window.createTextEditorDecorationType({    // 在匹配位置之后添加装饰效果：    after: {        color: "#333",        backgroundColor: "#fff",        width: "fit-content",        height: "0.8em",        // fontSize: "0.6em", 这么设置是无效的，因为并不支持fontSize字段，        // 但我们可以将其添加在任意字段后面        fontStyle: "normal;font-size:0.6em;line-height:0.8em"    }})

// 通过hex值计算应该使用的字体颜色function getContrastColor(hexcolor: string) {  const r = parseInt(hexcolor.substring(1, 2), 16)  const g = parseInt(hexcolor.substring(3, 4), 16)  const b = parseInt(hexcolor.substring(5, 6), 16)  const yiq = (r * 299 + g * 587 + b * 114) / 1000  return yiq >= 8 ? "black" : "white"}

vsce package